import { Tag } from 'antd';
import React from 'react';
import Texty from 'ronds-react-ui/es/components/Ellipsis';
import { CaretDownOutlined } from '@ant-design/icons';

import './NodeInfo.less';

const NodeInfo = () => {
  const data2 = {
    name: ['泵1', '泵2'],
    belong: ['urn:uloveits2:Pump:6knijv7rTrhD8iS9wPADsG'],
    type: 'Pump',
    id: 'urn:uloveits2:Pump:6knijv7rTrhD8iS9wPADsG',
  };

  const renderNodeInfo = (info: any) => {
    const keys = Object.keys(info);
    console.log(keys);

    return (
      <div style={{ borderLeft: '1px solid #000' }}>
        {(keys || []).map((it: any) => {
          if (info[it].toString().indexOf('uloveits') === -1) {
            return NormalCell(it, info[it]);
          }

          if (it !== 'id' && it !== 'type' && info[it].toString().indexOf('uloveits') !== -1) {
            return RefCell(it, info[it]);
          }
          return null;
        })}
      </div>
    );
  };

  const NormalCell = (label: string, value: string) => {
    return (
      <div className="node-info-block">
        <div className="node-info-block-line" />
        <div className="node-info-block-left-text pl-10">{label}:</div>
        <div className="pl-10" style={{ flex: 1, width: '100%' }}>
          <Texty>{value.toString()}</Texty>
        </div>
      </div>
    );
  };

  const RefCell = (label: string, value: any
    ) => {
    let _refId = [];
    if (value && typeof value === 'string') {
      _refId.push(value);
    } else {
      _refId = value;
    }

    const refInfo = [
      {
        name: '马钢',
        type: 'Site',
        id: 'urn:uloveits2:Site:5NcJuXOTpp59K72xNwB3si',
      },
      {
        name: '宝钢',
        type: 'Site',
        id: 'urn:uloveits2:Site:5NcJuXOTpp59K72xNwB3si',
      },
    ];
    return (
      <>
        <div className="node-info-block">
          <div className="node-info-block-line" />
          <div className="node-info-block-left-text pl-10">{label}</div>
          <div className="pl-10">
            {refInfo?.length === 1 ? (
              <Tag icon={<CaretDownOutlined />} color="volcano">
                {refInfo[0].type}
              </Tag>
            ) : (
              <Tag icon={<CaretDownOutlined />} color="magenta">
                Show {refInfo?.length} values
              </Tag>
            )}
          </div>
          {refInfo && refInfo?.length <= 1 && <div className="node-info-block-left-text">:</div>}
          <div className="node-info-block-right-text pl-10" style={{ flex: 1, width: '20px' }}>
            <Texty>{refInfo?.length === 1 && refInfo[0].name}</Texty>
          </div>
        </div>

        <div style={{ paddingLeft: '20px' }}>
          <div className="node-info-block">{renderNodeInfo(refInfo[0])}</div>
        </div>
      </>
    );
  };

  return renderNodeInfo(data2);
};

export default NodeInfo;
